<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册页面</title>
    <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
        <h1>欢迎注册</h1>
        <form action="register">
            <p><input type="text" name="username"> <span id="info"> </span></p>
            <p><input type="password" name="pwd"></p>
            <p><input type="submit" value="立即注册"></p>
        </form>

        <script type="text/javascript">

            $(":text").blur(function () {
                //获取用户填写的用户名
                var info = $(":text").val();
                //发送ajax   请求地址  参数   请求方式
                $.ajax({
                    url:'checkusername',   // 请求地址
                    data:{username:info},  // 请求参数
                    type:'post',        //请求方式  post  get
                    dateType:'json',     //响应数据格式
                    async:true,        //是否开启异步请求  false同步   true异步
                    success:function (res) { // 请求成功回调函数  res 表示后台响应的结果
                       //获取响应数据
                        var inf =  res.msg;
                        var code = res.code
                        //获取span标签 将数据写入
                        $("#info").text(inf)

                        if(code==1){  //用户名不可用  将文字的颜色设置为红色
                            $("#info").css('color','red')
                        }else{  //用户名可用  将文字的颜色设置为蓝色
                            $("#info").css('color','blue')
                        }

                    },
                    error:function () { //请求失败回调函数
                        console.log("请求失败!")
                    }
                })

                //$.post(url,data,function,type)   $.get(url,data,function,type)
                // $.post('checkusername',{username:info},function (res) {
                //     console.log(res)
                // },'json')

            })

        </script>

</body>
</html>
